<div id="viewer-container"></div>
<div style="display: none">
  <div id="label-info"/>
  <div id="label-info-blue"/>
</div>
<style>
  #label-info {
    background: url('./assets/sdk6zx61jn_1672718690377_vzavmzwmt.png');
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
  }

  #label-info-blue {
    background: url('./assets/uyqwhe6rh_1672142793035_irjrhen2f8.png');
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
  }
</style>
<script>
  CTS.ready(() => {
    let viewer = new CTS.Viewer('mainscene', {sky: false, light: false}) //初始化场景
    let labels = new CTS.Labels(viewer)
    let light = new CTS.AmbientLight(0xffffff, 0.1) // soft white light
    viewer.scene.add(light)
    const pointLight = new CTS.SpotLight(new CTS.Color('rgb(137,208,224)'), 100, 100)
    pointLight.position.set(0, 8, 0)
    pointLight.intensity = 10 // 光线强度
    pointLight.decay = 1 // 光的衰减指数
    pointLight.penumbra = 1
    viewer.scene.add(pointLight)
    const geoJsonLoader = new CTS.GeoJsonLoader(viewer, china.features, {
      center: [120.43, 29.24],
      repeatX: 0.1, repeatY: 0.1, offsetX: 0.43, offsetY: 0.5,
      height: 0.5,
      offset: 0.01,
      meshMaterial: img,
      sideColor: new CTS.Color('rgb(16,61,73)'),
      linewidth: 0.0015,
      lineColor: new CTS.Color('rgb(134,160,166)'),
      showTitle: true,
      labels: labels //增加标签对象
    })


    let floors = new CTS.Floors(viewer)
    const plane = floors.createPlane([43, 43], back, [1, 1])
    plane.position.set(0, -0.1, 0)

    const plane1 = floors.createPlane([14, 14], img1, [1, 1])
    const plane2 = floors.createPlane([14, 14], img2, [1, 1])
    const plane3 = floors.createPlane([14, 14], img3, [1, 1])
    viewer.addAnimate(() => {
      plane1.rotateZ(0.002)
      plane2.rotateZ(0.003)
      plane3.rotateZ(-0.002)
    })
    const group = geoJsonLoader.GeoGroup.children[0]

    let select = null
    let moveUp = () => {
      if (select && select.parent.position.z < 0.5) select.parent.position.z += 0.01
    }
    viewer.addAnimate(moveUp)
    let moveDown = () => {
      group.children.forEach((item) => {
        if (!select) {
          if (item.position.z > 0) item.position.z -= 0.01
        } else {
          if (item.name != select.parent.name) {
            if (item.position.z > 0) item.position.z -= 0.01
          }
        }
      })
    }
    viewer.addAnimate(moveDown)
    viewer.startSelectEvent('mousemove', false, (e) => {
      if (e.name) select = e
      else select = null
    })
    const div = document.getElementById('label-info')
    labels.addDivLabel(div.cloneNode(true), [0, 0.6, 3])
    labels.addDivLabel(div.cloneNode(true), [2, 0.6, 0])
    labels.addDivLabel(div.cloneNode(true), [-4, 0.6, 0])
    labels.addDivLabel(div.cloneNode(true), [-2, 0.6, -3])

    const div1 = document.getElementById('label-info-blue')
    labels.addDivLabel(div1.cloneNode(true), [-1, 0.6, 3])
    labels.addDivLabel(div1.cloneNode(true), [-2, 0.6, 0])
    labels.addDivLabel(div1.cloneNode(true), [4, 0.6, 0])
    labels.addDivLabel(div1.cloneNode(true), [-2, 0.6, 3])
  })
</script>
